<template>
  <div ref="energyConsumption5" style="width: 100%; height: 380px"></div>
</template>

<script>
import * as echarts from "echarts";
import { bingShow4 } from "@/api/charts";

export default {
  mounted() {
    this.drawpie();
  },
  methods: {
    drawpie() {
      bingShow4()
        .then(({data}) => {
          var chartDom = this.$refs.energyConsumption5;
          var myChart = echarts.init(chartDom);
          var option;

          option = {
            title: {
              text: "产业发展趋势",
            },
            tooltip: {
              trigger: "item",
            },
            legend: {
              top: "5%",
              left: "center",
            },
            series: [
              {
                name: "Access From",
                type: "pie",
                radius: ["40%", "70%"],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: "#fff",
                  borderWidth: 2,
                },
                label: {
                  show: false,
                  position: "center",
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: "bold",
                  },
                },
                labelLine: {
                  show: false,
                },
                data ///////////********** */
              },
            ],
          };

          option && myChart.setOption(option);
        })
        .catch((err) => {});
    },
  },
};
</script>

<style>
</style>